<template>
  <div>
    <video ref="msgUse" controls height="180" muted></video>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import flvjs from 'flv.js';

defineProps({
  msg: String,
});

onMounted(() => {
  videoPlayer();
});
const msgUse = ref(null);
const videoPlayer = function () {
  if (flvjs.isSupported()) {
    var flvPlayer = flvjs.createPlayer({
      type: 'flv',
      // url: 'http://10.200.0.205:8082/live/528800445528.flv', //你的url地址
      url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks',
      // 静音尝试解决无法播放问题
      isLive: true, //是否直播
      hasAudio: false, //静音
      //浏览器端开启flv.js的Worker，多进程运行flv.js提升解析速度可以优化延迟，这样做的flv.js配置代码是：
      enableWorker: false,
      enableStashBuffer: false,
      autoCleanupSourceBuffer: true,
      autoCleanupMaxBackwardDuration: 5,
      autoCleanupMinBackwardDuration: 1,
      stashInitialSize: 32,
    });
    flvPlayer.on(flvjs.Events.ERROR, (errorType, errorDetail, errorInfo) => {
      console.log('errorType:', errorType);
      console.log('errorDetail:', errorDetail);
      console.log('errorInfo:', errorInfo);
      // 如果视频播放出错就销毁player，用当前的url重新创建一个
      if (flvPlayer) {
        flvPlayer.pause();
        console.info('无法获取摄像头信息，连接失败！');
      }
    });
    flvPlayer.on(flvjs.Events.MEDIA_INFO, data => {
      console.log('MEDIA_INFO--' + JSON.stringify(data));
    });
    flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () {
      console.log('断流了');
    });
    flvPlayer.on(flvjs.Events.NETWORK_UNRECOVERABLE_EARLY_EOF, function () {
      console.log('断流了，重启');
      flvPlayer = null;
      flvPlayer = flvjs.createPlayer({
        type: 'flv',
        url: 'http://10.200.0.205:8082/live/528800445528.flv', //你的url地址
        // 静音尝试解决无法播放问题
        isLive: true, //是否直播
        hasAudio: false, //静音
        //浏览器端开启flv.js的Worker，多进程运行flv.js提升解析速度可以优化延迟，这样做的flv.js配置代码是：
        enableWorker: true,
        enableStashBuffer: false,
        autoCleanupSourceBuffer: true,
        autoCleanupMaxBackwardDuration: 5,
        autoCleanupMinBackwardDuration: 1,
        stashInitialSize: 32,
      });
      flvPlayer.attachMediaElement(msgUse.value);
      flvPlayer.load();
      flvPlayer.play();
    });
    flvPlayer.attachMediaElement(msgUse.value);
    flvPlayer.load();
    flvPlayer.play();
  }
};
</script>

<style scoped lang="scss">
.read-the-docs {
  color: #888;
}
</style>
